<template>
  <div class="home-container">
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          <el-icon class="hero-icon"><Document /></el-icon>
          公务员写作智能助手
        </h1>
        <p class="hero-subtitle">
          专业的公务员文件写作工具，AI赋能让您的文稿更加规范、专业、高效
        </p>
        
        <div class="hero-actions">
          <el-button type="danger" size="large" @click="showCategorySelection = true">
            <el-icon><EditPen /></el-icon>
            开始写作
          </el-button>
          <el-button size="large" @click="navigateToModelTest">
            <el-icon><Setting /></el-icon>
            模型配置
          </el-button>
        </div>
      </div>
      
      <div class="hero-stats">
        <div class="stat-item">
          <el-statistic title="支持文档类型" :value="8" />
        </div>
        <div class="stat-item">
          <el-statistic title="AI模型数量" :value="3" />
        </div>
        <div class="stat-item">
          <el-statistic title="写作模板" :value="20" suffix="+" />
        </div>
      </div>
    </div>

    <div class="features-section">
      <h2 class="section-title">核心功能</h2>
      
      <el-row :gutter="24">
        <el-col :span="8">
          <el-card class="feature-card materials-card" @click="showCategorySelection = true">
            <div class="feature-content">
              <div class="feature-icon">
                <el-icon size="36"><Files /></el-icon>
              </div>
              <div class="feature-info">
                <h3>材料写作</h3>
                <p>提供多种公务文件的AI润色和生成服务</p>
                
                <div class="feature-items">
                  <el-tag type="danger" effect="plain" size="small">民主生活会</el-tag>
                  <el-tag type="danger" effect="plain" size="small">总结材料</el-tag>
                  <el-tag type="primary" effect="plain" size="small">汇报材料</el-tag>
                  <el-tag type="success" effect="plain" size="small">宣传材料</el-tag>
                  <el-tag type="warning" effect="plain" size="small">行政公文</el-tag>
                  <el-tag type="info" effect="plain" size="small">发言稿</el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="feature-card model-card" @click="navigateToModelTest">
            <div class="feature-content">
              <div class="feature-icon">
                <el-icon size="36"><Setting /></el-icon>
              </div>
              <div class="feature-info">
                <h3>模型配置</h3>
                <p>配置和管理AI模型，设置API密钥和参数</p>
                
                <div class="feature-items">
                  <el-tag type="primary" effect="plain" size="small">Qwen Plus Latest</el-tag>
                  <el-tag type="success" effect="plain" size="small">Doubao Seed 1.6</el-tag>
                  <el-tag type="warning" effect="plain" size="small">DeepSeek R1</el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="feature-card coming-soon-card">
            <div class="feature-content">
              <div class="feature-icon">
                <el-icon size="36"><Tools /></el-icon>
              </div>
              <div class="feature-info">
                <h3>更多功能</h3>
                <p>更多实用功能正在开发中，敬请期待</p>
                
                <div class="feature-items">
                  <el-tag type="info" effect="plain" size="small">文档批量处理</el-tag>
                  <el-tag type="info" effect="plain" size="small">模板管理</el-tag>
                  <el-tag type="info" effect="plain" size="small">智能润色</el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分类选择对话框 -->
    <el-dialog v-model="showCategorySelection" title="选择写作类型" width="800px" center>
      <el-row :gutter="20">
        <el-col :span="12" v-for="category in categories" :key="category.name">
          <el-card class="category-selector" @click="navigateToCategory(category.route)">
            <div class="category-content">
              <div class="category-icon">
                <el-icon size="32" :style="{ color: category.color }">
                  <component :is="category.icon" />
                </el-icon>
              </div>
              <div class="category-info">
                <h4>{{ category.name }}</h4>
                <p>{{ category.description }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    
    <div class="advantages-section">
      <h2 class="section-title">产品优势</h2>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="advantage-item">
            <el-icon size="24" color="#dc3545"><Crown /></el-icon>
            <h4>专业专注</h4>
            <p>专门针对公务员写作场景优化，更贴合实际需求</p>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="advantage-item">
            <el-icon size="24" color="#dc3545"><Lightning /></el-icon>
            <h4>高效智能</h4>
            <p>AI驱动的智能写作，大幅提升文稿质量和写作效率</p>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="advantage-item">
            <el-icon size="24" color="#dc3545"><Shield /></el-icon>
            <h4>安全可靠</h4>
            <p>严格的数据保护机制，确保文档内容安全保密</p>
          </div>
        </el-col>
        
        <el-col :span="6">
          <div class="advantage-item">
            <el-icon size="24" color="#dc3545"><Star /></el-icon>
            <h4>持续优化</h4>
            <p>基于用户反馈不断优化模型，写作质量持续提升</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Files, 
  ChatDotSquare, 
  Postcard, 
  Management, 
  Mic, 
  DocumentChecked 
} from '@element-plus/icons-vue'

const router = useRouter()
const showCategorySelection = ref(false)

const categories = [
  {
    name: '材料分类',
    description: '民主生活会材料、总结材料',
    route: '/materials/democratic-life',
    icon: Files,
    color: '#dc3545'
  },
  {
    name: '汇报材料',
    description: '述职报告、工作汇报、心得体会',
    route: '/reports',
    icon: ChatDotSquare,
    color: '#409eff'
  },
  {
    name: '宣传材料',
    description: '新闻稿等宣传类文稿',
    route: '/publicity',
    icon: Postcard,
    color: '#67c23a'
  },
  {
    name: '行政公文',
    description: '函、命令、决定、批复等公文',
    route: '/administrative',
    icon: Management,
    color: '#e6a23c'
  },
  {
    name: '发言稿',
    description: '各类发言稿件写作',
    route: '/speech',
    icon: Mic,
    color: '#f56c6c'
  },
  {
    name: '总结材料',
    description: '专业的总结材料生成',
    route: '/materials/summary',
    icon: DocumentChecked,
    color: '#909399'
  }
]

const navigateToCategory = (route: string) => {
  showCategorySelection.value = false
  router.push(route)
}

const navigateToModelTest = () => {
  router.push('/model-test')
}
</script>

<style scoped>
.home-container {
  min-height: calc(100vh - 60px);
  padding: 0;
}

.hero-section {
  background: linear-gradient(135deg, #dc3545 0%, #b02a30 100%);
  color: white;
  padding: 80px 40px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-icon {
  font-size: 48px;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 3rem;
}

.hero-actions .el-button {
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 25px;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
}

.stat-item :deep(.el-statistic__content) {
  color: white !important;
}

.stat-item :deep(.el-statistic__head) {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px;
}

.features-section {
  padding: 80px 40px;
  background: #f8f9fa;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 3rem;
  font-weight: 600;
}

.feature-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.materials-card:hover {
  border-left: 4px solid #dc3545;
}

.model-card:hover {
  border-left: 4px solid #17a2b8;
}

.coming-soon-card:hover {
  border-left: 4px solid #6c757d;
}

.feature-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 20px;
}

.feature-icon {
  color: #dc3545;
  flex-shrink: 0;
}

.feature-info h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.feature-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.feature-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advantages-section {
  padding: 60px 40px;
  background: white;
}

.advantage-item {
  text-align: center;
  padding: 20px;
}

.advantage-item h4 {
  font-size: 1.2rem;
  color: #333;
  margin: 15px 0 10px;
  font-weight: 600;
}

.advantage-item p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 分类选择对话框样式 */
.category-selector {
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  border: 1px solid #ebeef5;
}

.category-selector:hover {
  border-color: #dc3545;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.category-selector .category-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
}

.category-selector .category-icon {
  flex-shrink: 0;
}

.category-selector .category-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.category-selector .category-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
    flex-direction: column;
    gap: 10px;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .features-section,
  .advantages-section {
    padding: 40px 20px;
  }
  
  .feature-content {
    flex-direction: column;
    text-align: center;
  }
}
</style>